<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Wizard Scrolling</title>

	<script data-ui5-config type="application/json">
		{
			"theme": "sap_fiori_3",
			"language": "EN"
		}
	</script>

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>

	<link rel="stylesheet" type="text/css" href="./styles/Wizard.css">
</head>

<body class="wizard1auto">
    <ui5-wizard id="wizScroll" style="height: 100%;">
        <ui5-wizard-step id="step1" title-text="Step 1" selected>
            <div>
                <ui5-title>Step 1</ui5-title>
                <div style="height: 4440px;"></div>
                <ui5-button id="toStep2">Step 2</ui5-button>
            </div>
        </ui5-wizard-step>
        <ui5-wizard-step id="step2" title-text="Step 2" disabled>
            <div>
                <ui5-title>Step 2</ui5-title>
            </div>
        </ui5-wizard-step>
    </ui5-wizard>

	<script>
		const btn = document.getElementById("toStep2");

		btn.addEventListener("click", () => {
            const step1 = document.getElementById("step1");
            const step2 = document.getElementById("step2");

            step1.selected = false;
            step2.selected = true;
            step2.disabled = false;
		});
	</script>
</body>
</html>
